<template>
	<view class="container">
		<view class="header">团购优惠</view>
		<view class="message-list">
			<view class="message-item" v-for="(item, index) in messages" :key="index">
				<image :src="item.imageSrc"></image>
				<view class="message-content">
					<view class="message-text">
						<text>{{item.messageText}}</text>
					</view>
					<view class="message-more" @click="goToDetail(item)">详情 ></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';

	const messages = ref([{
			imageSrc: "/static/whb/youhui1.jpg",
			messageText: "免费发放活动进行中..."
		},
		{
			imageSrc: "/static/whb/youhui2.jpg",
			messageText: "沃尔沃东区夏日..."
		}
	]);

	const goToDetail = (item) => {
		uni.navigateTo({
			url: '/pages/whb/07-discountDetail/07-discountDetail'
		});
	};
</script>

<style>
	.container {
		height: 200px;
		background-color: #007AFF;
	}

	.header {
		text-align: center;
		color: white;
		padding-top: 10px;
		font-size: 20px;
	}

	.message-list {
		background-color: white;
		margin: 10px 15px 0 15px;
	}

	.message-item {
		position: relative;
		margin-bottom: 10px;
		padding: 10px;
	}

	.message-item::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: -15px;
		right: -15px;
		height: 10px;
		background-color: #ccc;
	}

	.message-content {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 5px 0;
	}

	.message-text {
		margin-top: 0;
	}

	.message-more {
		color: #007AFF;
		cursor: pointer;
	}
</style>